<template>
  <div id="user-spaces">
    <div class="main-container container-fluid container-limited page-holder">
      <SpacesList :spaces="spaces" :is-loading="isLoading"/>
      <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount"/>
    </div>
  </div>
</template>

<script>
import SpacesList from '@/components/spaces/SpacesList';
import * as format from '@/components/spaces/format';

export default {
  name: 'UserSpaces', // 用户加入的空间
  components: { SpacesList },
  data() {
    return {
      spaces: [], // 用户加入的空间的列表数据
      isLoading: false, // 正在加载列表
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
    };
  },
  computed: {
    // 当前查看的用户id
    userId() { return this.$route.params.userId; },
    // 加载用户加入的空间列表
    initLoadParams() {
      return {
        type: 'user', // 查看他人加入的空间专用
        userId: this.userId,
        page: this.$route.query.page || 1, // 加载页数
        sort: 'updated', // 排序类型（更新、收藏）
        order: 'desc', // 排序方式（倒序、正序）
      };
    },
  },
  methods: {
    // 加载用户加入的空间列表
    loadSpaces() {
      this.isLoading = true;
      this.$api.spaces.index(this.initLoadParams)
        .then(res => this.handleRes(res))
        .catch(() => {})
        .then(() => { this.isLoading = false; });
    },
    // 处理返回数据
    handleRes(res) {
      this.spaces = format.formatSpacesList(res.data);
      this.pagination.currentPage = res.kaminari.current_page;
      this.pagination.pageCount = res.kaminari.total_pages;
    },
  },
  created() {
    this.loadSpaces();
  },
  watch: {
    // 监听加载空间列表的参数，发生改变时重新加载空间列表
    initLoadParams() { this.loadSpaces(); },
  },
};
</script>

<style></style>
